<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./common.js"></script>
    <style>
         .container{
            width: 100%;
          
            
         }  
         input{
            margin: 10px 10px;
            width: 90%;
            height: 30px;
            background-color: #eeeeee;
            border-radius: 5px;

         }
         .title{
            width: 95%;
            border-left: 4px solid #007bff;
            margin: 0 auto;

         }
         
        .text2{
            float: right;
            color: #007bff;
        }
        #films{
            margin-top: 10px;
            display: flex;
            margin-left: 12px;
           white-space: nowrap;
            overflow-x: scroll;
        }
        #films1{
             margin-top: 10px;
            display: flex;
            margin-left: 12px;
           white-space: nowrap;
            overflow-x: scroll;
        }
        #films2{
                margin-top: 10px;
            display: flex;
            margin-left: 12px;
           white-space: nowrap;
            overflow-x: scroll;
        }
         .films-pic img{
            width: 110px;
            height: 150px;
         }
         .start img{
            width: 12px;
         }
         .all{
            margin-top: 10px;
         }
         .aa{
            margin: 2px 3px;
         }
        
    </style>
    
</head>
<body>
    <div class="container">
                <input type="text">
                <hr>
                <div class="all">
                    <div class="title">
                        <span class="text1">热门电影</span>
                        <span class="text2" onclick="more()">更多></span>
                    </div>
                    <div id="films">
                    </div>
                </div>

                <div class="all">
                    <div class="title">
                        <span class="text1">热门电影</span>
                        <span class="text2" onclick="more()">更多></span>
                    </div>
                    <div id="films1">
                    </div>
                </div>

                <div class="all">
                    <div class="title">
                        <span class="text1">热门电影</span>
                        <span class="text2" onclick="more()">更多></span>
                    </div>
                    <div id="films2">
                    </div>
                </div>

               


    </div>
</body>
<script>
    let filmsDOm=document.getElementById('films')
    let filmsDOm1 = document.getElementById('films1')
    let filmsDOm2 = document.getElementById('films2')
    let str=''
    for(let i=0;i<5;i++){
        str+=`
        
        <div class='aa'>
                        <div class="films-pic"><img src="./imgs/film.jpg" alt=""></div>
                        <div style="font-size: 13px;">蚁人2：黄蜂女...</div>
                        <div class="start">
                            <img src="./imgs/star-open.png">
                            <img src="./imgs/star-open.png">
                            <img src="./imgs/star-open.png">
                            <img src="./imgs/star-close.png">
                            <img src="./imgs/star-close.png">
                            <span>7.9</span>
                        </div>
        </div>
        
        `
      filmsDOm.innerHTML=str
      filmsDOm1.innerHTML=str
       filmsDOm2.innerHTML = str

    }
    function more(){
        window.location.href='./02.html'
    }
</script>
</html>